import { initState } from "./state";
import { compileToRenderFunction } from './compiler';
import { mountComponent } from "./lifecycle";

function initMixin(Vue) {
  Vue.prototype._init = function (options) {
    const vm = this;

    vm.$options = options;

    initState(vm);

    if (vm.$options.el) {
      // 挂载函数 -> Vue.prototype.$mount
      vm.$mount(vm.$options.el);
    }
  }

  Vue.prototype.$mount = function (el) {
    const vm = this,
          options = vm.$options;
    
    el = document.querySelector(el);
    vm.$el = el;

    if (!options.render) { // 如果render 函数不存在
      let template = options.template; // 取到模板

      if (!template && el) { // 如果模板也不存在就 取html式 模板
        template = el.outerHTML;
      }

      // 把模板转 AST树 —> 再转 render函数
      const render = compileToRenderFunction(template);
      options.render = render; // 把render函数挂载到实例上
    }

    mountComponent(vm); // render函数转虚拟节点(挂载的过程，涉及到生命周期)
  }
}

export {
  initMixin
}